<template>
    <div class="searchBox">
        <div class="form">
            <button>
                <svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"
                    aria-labelledby="search">
                    <path d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9"
                        stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </button>
            <input class="input" v-model="searchText" placeholder="请输入搜索内容" :required="true" type="text"
                @keyup.enter="searchDir">
            <button class="reset" type="reset" @click="reset">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </div>
    <div class="divider">
        <el-divider content-position="right"><span :class="totalLength=== 0? 'error': 'success'">共搜索到{{totalLength}}条记录，有{{imgs.length}}张图片、{{videos.length}}条视频和{{folders.length}}个文件夹</span></el-divider>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { usePathStore } from "../store/index"
// @ts-ignore
import { ElMessage } from "element-plus"
import { storeToRefs } from "pinia"
const pathStore = usePathStore()
const { imgs, videos, folders } = storeToRefs(pathStore)
const searchText = ref("")
const router = useRouter()
const route = useRoute()
const totalLength = computed( () => {
    return imgs.value.length + videos.value.length + folders.value.length
} )

searchText.value = route.query.searchText as string
function searchDir() {
    if (searchText.value === undefined || searchText.value.trim() == '') {
        ElMessage.error("请输入搜索内容")
        return;
    }
    pathStore.searchBySerText(searchText.value)
    router.push({
        name: "search",
        query: {
            searchText: searchText.value
        }
    })
}

function reset() {
    searchText.value = ""
}



</script>
<style lang="scss">
/* From uiverse.io by @satyamchaudharydev */
/* removing default style of button */

.searchBox {
    display: flex;
    justify-content: flex-end;
    margin: 30px 30px 0 0;
}

.tips{
    margin: 10px ;
}

.divider{
    margin: 40px 0 -10px 0;
}

.el-divider__text{
    background-color: transparent;
}

.success{
    color: #529b2e !important;
}
.error{
    color: #F56C6C;
}


.form button {
    border: none;
    background: none;
    color: #8b8ba7;
}

/* styling of whole input container */
.form {
    --timing: 0.3s;
    --width-of-input: 280px;
    --height-of-input: 40px;
    --border-height: 2px;
    --input-bg: #fff;
    --border-color: #2f2ee9;
    --border-radius: 30px;
    --after-border-radius: 1px;
    position: relative;
    width: var(--width-of-input);
    height: var(--height-of-input);
    display: flex;
    align-items: center;
    padding-inline: 0.8em;
    border-radius: var(--border-radius);
    transition: border-radius 0.5s ease;
    background: var(--input-bg, #fff);
}

/* styling of Input */
.input {
    font-size: 0.9rem;
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding-inline: 0.5em;
    padding-block: 0.7em;
    border: none;
}

/* styling of animated border */
.form:before {
    content: "";
    position: absolute;
    background: var(--border-color);
    transform: scaleX(0);
    transform-origin: center;
    width: 100%;
    height: var(--border-height);
    left: 0;
    bottom: 0;
    border-radius: 1px;
    transition: transform var(--timing) ease;
}

/* Hover on Input */
.form:focus-within {
    border-radius: var(--after-border-radius);
}

input:focus {
    outline: none;
}

/* here is code of animated border */
.form:focus-within:before {
    transform: scale(1);
}

/* styling of close button */
/* == you can click the close button to remove text == */
.reset {
    border: none;
    background: none;
    opacity: 0;
    visibility: hidden;
}

/* close button shown when typing */
input:not(:placeholder-shown)~.reset {
    opacity: 1;
    visibility: visible;
}

/* sizing svg icons */
.form svg {
    width: 17px;
    margin-top: 3px;
}
</style>